<template>
    <div>
        <div class="DetailView">
            <div class="headerbox">
                <div class="head">
                    <div class="left" @click="ref">
                        <svg t="1668609999558" class="icon" viewBox="0 0 1024 1024" version="1.1"
                            xmlns="http://www.w3.org/2000/svg" p-id="2982" width="200" height="200">
                            <path
                                d="M401.066667 512l302.933333 302.933333-59.733333 59.733334L341.333333 571.733333 281.6 512 341.333333 452.266667l302.933334-302.933334 59.733333 59.733334L401.066667 512z"
                                fill="#444444" p-id="2983"></path>
                        </svg>
                    </div>

                    <div class="right">
                        <div class="bon">
                            <svg t="1667993602042" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                xmlns="http://www.w3.org/2000/svg" p-id="2937" width="200" height="200">
                                <path
                                    d="M1024 505.929143c0-10.642286-4.642743-20.143543-11.856457-26.8928L608 130.0352c-6.429257-5.463771-14.6432-8.892343-23.714743-8.892343-20.286171 0-36.642743 16.393143-36.642743 36.642743l0 154.499657C238.714514 362.143086 21.215086 589.249829 0 880.714971c1.000229 12.357486 11.143314 22.178743 23.714743 22.178743 4.856686 0 9.428114-1.464686 13.215086-3.964343 0.071314-0.071314 0 0.213943 0.071314 0.213943 53.357714-37.893486 99.499886-66.143086 135.5008-85.141943 87.356343-48.071314 222.999771-86.893714 375.1424-102.500571l0 143.1424c0 20.286171 16.356571 36.642743 36.642743 36.642743 8.643657 0 16.427886-3.249371 22.714514-8.285257l404.214857-349.070629c0-0.036571-0.142629-0.071314-0.071314-0.107886C1019.000686 527.1424 1024 517.1072 1024 505.929143zM620.929829 774.178743l0-142.142171-39.356343 2.929371c-159.213714 11.856457-371.143314 58.177829-490.929371 143.892114 58.357029-214.571886 244.000914-368.107886 497.929143-398.357943l32.356571-3.856457 0-138.642286 310.357943 268.106971L620.929829 774.178743z"
                                    p-id="2938" fill="#989898"></path>
                            </svg>
                        </div>

                        <div class="dot">
                            <svg t="1667993757767" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                xmlns="http://www.w3.org/2000/svg" p-id="8898" width="200" height="200">
                                <path
                                    d="M513.5 224c47.9 0 86.7-35.8 86.7-79.9 0-44.1-38.8-79.9-86.7-79.9-47.9 0-86.7 35.8-86.7 79.9 0 44.1 38.8 79.9 86.7 79.9z m0 194.2c-47.9 0-86.7 35.7-86.7 79.8 0 44.1 38.8 79.8 86.7 79.8 47.9 0 86.7-35.7 86.7-79.8 0-44.1-38.8-79.8-86.7-79.8z m0 353.9c-47.9 0-86.7 35.7-86.7 79.8 0 44.1 38.8 79.8 86.7 79.8 47.9 0 86.7-35.7 86.7-79.8 0-44.1-38.8-79.8-86.7-79.8z"
                                    p-id="8899" fill="#989898"></path>
                            </svg>
                        </div>
                    </div>


                </div>

                <div class="bookbox">
                    <div class="img">
                        <img :src="lists.bookCover" alt="">
                    </div>
                    <div class="textbox">
                        <p>{{ lists.bookName }}</p>
                        <div class="box">
                            <p>{{ lists.bookAuthor }}</p>
                            <p>{{ lists.bookName }}</p>
                        </div>
                        <div class="price">

                        </div>
                    </div>
                </div>

                <div class="bottombox">
                    <div class="points">
                        <p>5.0分</p>
                        <div class="star">
                            <svg t="1667996605912" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                xmlns="http://www.w3.org/2000/svg" p-id="13183" width="200" height="200">
                                <path
                                    d="M845.5 934.7c2.5 18.1-4.7 34.8-19.6 45.6-14.9 10.7-33 12.4-49.6 4.4L534 868.1c-13.8-6.6-28.3-6.6-42.1 0L249.4 984.3c-16.6 7.9-34.7 6.3-49.6-4.5-14.9-10.8-22-27.5-19.5-45.6l36.2-265.7c2.1-15.1-2.4-28.9-13-39.9l-186-193.9C4.9 421.5 0.8 403.8 6.5 386.4c5.7-17.4 19.4-29.3 37.5-32.6l264.8-47.7c15.1-2.7 26.8-11.2 34.1-24.6l127.6-236c8.7-16.1 24.4-25.4 42.7-25.4 18.4 0 34 9.3 42.7 25.5l127.4 236.2c7.3 13.4 19 21.9 34 24.7l264.8 48c18.1 3.3 31.8 15.2 37.5 32.6 5.7 17.4 1.6 35.1-11.1 48.3l-186 193.7c-10.6 11-15.1 24.8-13 39.9l36 265.7z"
                                    fill="#F19927" p-id="13184"></path>
                                <path
                                    d="M809.4 669c-2-15.1 2.4-28.8 13-39.9l186.1-193.7c12.7-13.2 16.8-30.9 11.1-48.3-5.7-17.4-19.4-29.3-37.5-32.6l-264.8-48c-15.1-2.7-26.8-11.2-34-24.7L555.9 45.5c-8.7-16.1-24.3-25.4-42.7-25.5-18.4 0-34 9.3-42.7 25.4l-127.6 236c-7.3 13.4-19 21.9-34.1 24.6L44 353.8c-18.1 3.3-31.8 15.2-37.5 32.6-5.7 17.4-1.6 35.1 11.1 48.3l186 193.9c10.6 11 15.1 24.8 13 39.9l-21.8 159.6h636.3L809.4 669z"
                                    fill="#FAD97E" opacity=".2" p-id="13185"></path>
                                <path
                                    d="M809.4 669c-2-15.1 2.4-28.8 13-39.9l186.1-193.7c12.7-13.2 16.8-30.9 11.1-48.3-5.7-17.4-19.4-29.3-37.5-32.6l-264.8-48c-15.1-2.7-26.8-11.2-34-24.7L555.9 45.5c-8.7-16.1-24.3-25.4-42.7-25.5-18.4 0-34 9.3-42.7 25.4l-127.6 236c-7.3 13.4-19 21.9-34.1 24.6L44 353.8c-18.1 3.3-31.8 15.2-37.5 32.6-5.7 17.4-1.6 35.1 11.1 48.3l186 193.9c10.6 11 15.1 24.8 13 39.9l-2.9 21.1h598.6l-2.9-20.6z"
                                    fill="#FAD97E" opacity=".2" p-id="13186"></path>
                                <path
                                    d="M1008.5 435.4c12.7-13.2 16.8-30.9 11.1-48.3-5.7-17.4-19.4-29.3-37.5-32.6l-264.8-48c-15.1-2.7-26.8-11.2-34-24.7L555.9 45.5c-8.7-16.1-24.3-25.4-42.7-25.5-18.4 0-34 9.3-42.7 25.4l-127.6 236c-7.3 13.4-19 21.9-34.1 24.6L44 353.8c-18.1 3.3-31.8 15.2-37.5 32.6-5.7 17.4-1.6 35.1 11.1 48.3l67.3 70.2h856.9l66.7-69.5z"
                                    fill="#FAD97E" opacity=".2" p-id="13187"></path>
                                <path
                                    d="M982.2 354.5l-264.8-48c-15.1-2.7-26.8-11.2-34-24.7L555.9 45.5c-8.7-16.1-24.3-25.4-42.7-25.5-18.4 0-34 9.3-42.7 25.4l-127.6 236c-7.3 13.4-19 21.9-34.1 24.6L44 353.8c-9.8 1.8-18.1 6.2-24.8 12.6h987.1c-6.5-6-14.7-10.2-24.1-11.9z"
                                    fill="#FAD97E" opacity=".2" p-id="13188"></path>
                                <path
                                    d="M555.9 45.5c-8.7-16.1-24.3-25.4-42.7-25.5-18.4 0-34 9.3-42.7 25.4L372 227.7h282.3L555.9 45.5z"
                                    fill="#FAD97E" opacity=".2" p-id="13189"></path>
                            </svg>
                            <svg t="1667996605912" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                xmlns="http://www.w3.org/2000/svg" p-id="13183" width="200" height="200">
                                <path
                                    d="M845.5 934.7c2.5 18.1-4.7 34.8-19.6 45.6-14.9 10.7-33 12.4-49.6 4.4L534 868.1c-13.8-6.6-28.3-6.6-42.1 0L249.4 984.3c-16.6 7.9-34.7 6.3-49.6-4.5-14.9-10.8-22-27.5-19.5-45.6l36.2-265.7c2.1-15.1-2.4-28.9-13-39.9l-186-193.9C4.9 421.5 0.8 403.8 6.5 386.4c5.7-17.4 19.4-29.3 37.5-32.6l264.8-47.7c15.1-2.7 26.8-11.2 34.1-24.6l127.6-236c8.7-16.1 24.4-25.4 42.7-25.4 18.4 0 34 9.3 42.7 25.5l127.4 236.2c7.3 13.4 19 21.9 34 24.7l264.8 48c18.1 3.3 31.8 15.2 37.5 32.6 5.7 17.4 1.6 35.1-11.1 48.3l-186 193.7c-10.6 11-15.1 24.8-13 39.9l36 265.7z"
                                    fill="#F19927" p-id="13184"></path>
                                <path
                                    d="M809.4 669c-2-15.1 2.4-28.8 13-39.9l186.1-193.7c12.7-13.2 16.8-30.9 11.1-48.3-5.7-17.4-19.4-29.3-37.5-32.6l-264.8-48c-15.1-2.7-26.8-11.2-34-24.7L555.9 45.5c-8.7-16.1-24.3-25.4-42.7-25.5-18.4 0-34 9.3-42.7 25.4l-127.6 236c-7.3 13.4-19 21.9-34.1 24.6L44 353.8c-18.1 3.3-31.8 15.2-37.5 32.6-5.7 17.4-1.6 35.1 11.1 48.3l186 193.9c10.6 11 15.1 24.8 13 39.9l-21.8 159.6h636.3L809.4 669z"
                                    fill="#FAD97E" opacity=".2" p-id="13185"></path>
                                <path
                                    d="M809.4 669c-2-15.1 2.4-28.8 13-39.9l186.1-193.7c12.7-13.2 16.8-30.9 11.1-48.3-5.7-17.4-19.4-29.3-37.5-32.6l-264.8-48c-15.1-2.7-26.8-11.2-34-24.7L555.9 45.5c-8.7-16.1-24.3-25.4-42.7-25.5-18.4 0-34 9.3-42.7 25.4l-127.6 236c-7.3 13.4-19 21.9-34.1 24.6L44 353.8c-18.1 3.3-31.8 15.2-37.5 32.6-5.7 17.4-1.6 35.1 11.1 48.3l186 193.9c10.6 11 15.1 24.8 13 39.9l-2.9 21.1h598.6l-2.9-20.6z"
                                    fill="#FAD97E" opacity=".2" p-id="13186"></path>
                                <path
                                    d="M1008.5 435.4c12.7-13.2 16.8-30.9 11.1-48.3-5.7-17.4-19.4-29.3-37.5-32.6l-264.8-48c-15.1-2.7-26.8-11.2-34-24.7L555.9 45.5c-8.7-16.1-24.3-25.4-42.7-25.5-18.4 0-34 9.3-42.7 25.4l-127.6 236c-7.3 13.4-19 21.9-34.1 24.6L44 353.8c-18.1 3.3-31.8 15.2-37.5 32.6-5.7 17.4-1.6 35.1 11.1 48.3l67.3 70.2h856.9l66.7-69.5z"
                                    fill="#FAD97E" opacity=".2" p-id="13187"></path>
                                <path
                                    d="M982.2 354.5l-264.8-48c-15.1-2.7-26.8-11.2-34-24.7L555.9 45.5c-8.7-16.1-24.3-25.4-42.7-25.5-18.4 0-34 9.3-42.7 25.4l-127.6 236c-7.3 13.4-19 21.9-34.1 24.6L44 353.8c-9.8 1.8-18.1 6.2-24.8 12.6h987.1c-6.5-6-14.7-10.2-24.1-11.9z"
                                    fill="#FAD97E" opacity=".2" p-id="13188"></path>
                                <path
                                    d="M555.9 45.5c-8.7-16.1-24.3-25.4-42.7-25.5-18.4 0-34 9.3-42.7 25.4L372 227.7h282.3L555.9 45.5z"
                                    fill="#FAD97E" opacity=".2" p-id="13189"></path>
                            </svg>
                            <svg t="1667996605912" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                xmlns="http://www.w3.org/2000/svg" p-id="13183" width="200" height="200">
                                <path
                                    d="M845.5 934.7c2.5 18.1-4.7 34.8-19.6 45.6-14.9 10.7-33 12.4-49.6 4.4L534 868.1c-13.8-6.6-28.3-6.6-42.1 0L249.4 984.3c-16.6 7.9-34.7 6.3-49.6-4.5-14.9-10.8-22-27.5-19.5-45.6l36.2-265.7c2.1-15.1-2.4-28.9-13-39.9l-186-193.9C4.9 421.5 0.8 403.8 6.5 386.4c5.7-17.4 19.4-29.3 37.5-32.6l264.8-47.7c15.1-2.7 26.8-11.2 34.1-24.6l127.6-236c8.7-16.1 24.4-25.4 42.7-25.4 18.4 0 34 9.3 42.7 25.5l127.4 236.2c7.3 13.4 19 21.9 34 24.7l264.8 48c18.1 3.3 31.8 15.2 37.5 32.6 5.7 17.4 1.6 35.1-11.1 48.3l-186 193.7c-10.6 11-15.1 24.8-13 39.9l36 265.7z"
                                    fill="#F19927" p-id="13184"></path>
                                <path
                                    d="M809.4 669c-2-15.1 2.4-28.8 13-39.9l186.1-193.7c12.7-13.2 16.8-30.9 11.1-48.3-5.7-17.4-19.4-29.3-37.5-32.6l-264.8-48c-15.1-2.7-26.8-11.2-34-24.7L555.9 45.5c-8.7-16.1-24.3-25.4-42.7-25.5-18.4 0-34 9.3-42.7 25.4l-127.6 236c-7.3 13.4-19 21.9-34.1 24.6L44 353.8c-18.1 3.3-31.8 15.2-37.5 32.6-5.7 17.4-1.6 35.1 11.1 48.3l186 193.9c10.6 11 15.1 24.8 13 39.9l-21.8 159.6h636.3L809.4 669z"
                                    fill="#FAD97E" opacity=".2" p-id="13185"></path>
                                <path
                                    d="M809.4 669c-2-15.1 2.4-28.8 13-39.9l186.1-193.7c12.7-13.2 16.8-30.9 11.1-48.3-5.7-17.4-19.4-29.3-37.5-32.6l-264.8-48c-15.1-2.7-26.8-11.2-34-24.7L555.9 45.5c-8.7-16.1-24.3-25.4-42.7-25.5-18.4 0-34 9.3-42.7 25.4l-127.6 236c-7.3 13.4-19 21.9-34.1 24.6L44 353.8c-18.1 3.3-31.8 15.2-37.5 32.6-5.7 17.4-1.6 35.1 11.1 48.3l186 193.9c10.6 11 15.1 24.8 13 39.9l-2.9 21.1h598.6l-2.9-20.6z"
                                    fill="#FAD97E" opacity=".2" p-id="13186"></path>
                                <path
                                    d="M1008.5 435.4c12.7-13.2 16.8-30.9 11.1-48.3-5.7-17.4-19.4-29.3-37.5-32.6l-264.8-48c-15.1-2.7-26.8-11.2-34-24.7L555.9 45.5c-8.7-16.1-24.3-25.4-42.7-25.5-18.4 0-34 9.3-42.7 25.4l-127.6 236c-7.3 13.4-19 21.9-34.1 24.6L44 353.8c-18.1 3.3-31.8 15.2-37.5 32.6-5.7 17.4-1.6 35.1 11.1 48.3l67.3 70.2h856.9l66.7-69.5z"
                                    fill="#FAD97E" opacity=".2" p-id="13187"></path>
                                <path
                                    d="M982.2 354.5l-264.8-48c-15.1-2.7-26.8-11.2-34-24.7L555.9 45.5c-8.7-16.1-24.3-25.4-42.7-25.5-18.4 0-34 9.3-42.7 25.4l-127.6 236c-7.3 13.4-19 21.9-34.1 24.6L44 353.8c-9.8 1.8-18.1 6.2-24.8 12.6h987.1c-6.5-6-14.7-10.2-24.1-11.9z"
                                    fill="#FAD97E" opacity=".2" p-id="13188"></path>
                                <path
                                    d="M555.9 45.5c-8.7-16.1-24.3-25.4-42.7-25.5-18.4 0-34 9.3-42.7 25.4L372 227.7h282.3L555.9 45.5z"
                                    fill="#FAD97E" opacity=".2" p-id="13189"></path>
                            </svg>
                            <svg t="1667996605912" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                xmlns="http://www.w3.org/2000/svg" p-id="13183" width="200" height="200">
                                <path
                                    d="M845.5 934.7c2.5 18.1-4.7 34.8-19.6 45.6-14.9 10.7-33 12.4-49.6 4.4L534 868.1c-13.8-6.6-28.3-6.6-42.1 0L249.4 984.3c-16.6 7.9-34.7 6.3-49.6-4.5-14.9-10.8-22-27.5-19.5-45.6l36.2-265.7c2.1-15.1-2.4-28.9-13-39.9l-186-193.9C4.9 421.5 0.8 403.8 6.5 386.4c5.7-17.4 19.4-29.3 37.5-32.6l264.8-47.7c15.1-2.7 26.8-11.2 34.1-24.6l127.6-236c8.7-16.1 24.4-25.4 42.7-25.4 18.4 0 34 9.3 42.7 25.5l127.4 236.2c7.3 13.4 19 21.9 34 24.7l264.8 48c18.1 3.3 31.8 15.2 37.5 32.6 5.7 17.4 1.6 35.1-11.1 48.3l-186 193.7c-10.6 11-15.1 24.8-13 39.9l36 265.7z"
                                    fill="#F19927" p-id="13184"></path>
                                <path
                                    d="M809.4 669c-2-15.1 2.4-28.8 13-39.9l186.1-193.7c12.7-13.2 16.8-30.9 11.1-48.3-5.7-17.4-19.4-29.3-37.5-32.6l-264.8-48c-15.1-2.7-26.8-11.2-34-24.7L555.9 45.5c-8.7-16.1-24.3-25.4-42.7-25.5-18.4 0-34 9.3-42.7 25.4l-127.6 236c-7.3 13.4-19 21.9-34.1 24.6L44 353.8c-18.1 3.3-31.8 15.2-37.5 32.6-5.7 17.4-1.6 35.1 11.1 48.3l186 193.9c10.6 11 15.1 24.8 13 39.9l-21.8 159.6h636.3L809.4 669z"
                                    fill="#FAD97E" opacity=".2" p-id="13185"></path>
                                <path
                                    d="M809.4 669c-2-15.1 2.4-28.8 13-39.9l186.1-193.7c12.7-13.2 16.8-30.9 11.1-48.3-5.7-17.4-19.4-29.3-37.5-32.6l-264.8-48c-15.1-2.7-26.8-11.2-34-24.7L555.9 45.5c-8.7-16.1-24.3-25.4-42.7-25.5-18.4 0-34 9.3-42.7 25.4l-127.6 236c-7.3 13.4-19 21.9-34.1 24.6L44 353.8c-18.1 3.3-31.8 15.2-37.5 32.6-5.7 17.4-1.6 35.1 11.1 48.3l186 193.9c10.6 11 15.1 24.8 13 39.9l-2.9 21.1h598.6l-2.9-20.6z"
                                    fill="#FAD97E" opacity=".2" p-id="13186"></path>
                                <path
                                    d="M1008.5 435.4c12.7-13.2 16.8-30.9 11.1-48.3-5.7-17.4-19.4-29.3-37.5-32.6l-264.8-48c-15.1-2.7-26.8-11.2-34-24.7L555.9 45.5c-8.7-16.1-24.3-25.4-42.7-25.5-18.4 0-34 9.3-42.7 25.4l-127.6 236c-7.3 13.4-19 21.9-34.1 24.6L44 353.8c-18.1 3.3-31.8 15.2-37.5 32.6-5.7 17.4-1.6 35.1 11.1 48.3l67.3 70.2h856.9l66.7-69.5z"
                                    fill="#FAD97E" opacity=".2" p-id="13187"></path>
                                <path
                                    d="M982.2 354.5l-264.8-48c-15.1-2.7-26.8-11.2-34-24.7L555.9 45.5c-8.7-16.1-24.3-25.4-42.7-25.5-18.4 0-34 9.3-42.7 25.4l-127.6 236c-7.3 13.4-19 21.9-34.1 24.6L44 353.8c-9.8 1.8-18.1 6.2-24.8 12.6h987.1c-6.5-6-14.7-10.2-24.1-11.9z"
                                    fill="#FAD97E" opacity=".2" p-id="13188"></path>
                                <path
                                    d="M555.9 45.5c-8.7-16.1-24.3-25.4-42.7-25.5-18.4 0-34 9.3-42.7 25.4L372 227.7h282.3L555.9 45.5z"
                                    fill="#FAD97E" opacity=".2" p-id="13189"></path>
                            </svg>
                            <svg t="1667996605912" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                xmlns="http://www.w3.org/2000/svg" p-id="13183" width="200" height="200">
                                <path
                                    d="M845.5 934.7c2.5 18.1-4.7 34.8-19.6 45.6-14.9 10.7-33 12.4-49.6 4.4L534 868.1c-13.8-6.6-28.3-6.6-42.1 0L249.4 984.3c-16.6 7.9-34.7 6.3-49.6-4.5-14.9-10.8-22-27.5-19.5-45.6l36.2-265.7c2.1-15.1-2.4-28.9-13-39.9l-186-193.9C4.9 421.5 0.8 403.8 6.5 386.4c5.7-17.4 19.4-29.3 37.5-32.6l264.8-47.7c15.1-2.7 26.8-11.2 34.1-24.6l127.6-236c8.7-16.1 24.4-25.4 42.7-25.4 18.4 0 34 9.3 42.7 25.5l127.4 236.2c7.3 13.4 19 21.9 34 24.7l264.8 48c18.1 3.3 31.8 15.2 37.5 32.6 5.7 17.4 1.6 35.1-11.1 48.3l-186 193.7c-10.6 11-15.1 24.8-13 39.9l36 265.7z"
                                    fill="#F19927" p-id="13184"></path>
                                <path
                                    d="M809.4 669c-2-15.1 2.4-28.8 13-39.9l186.1-193.7c12.7-13.2 16.8-30.9 11.1-48.3-5.7-17.4-19.4-29.3-37.5-32.6l-264.8-48c-15.1-2.7-26.8-11.2-34-24.7L555.9 45.5c-8.7-16.1-24.3-25.4-42.7-25.5-18.4 0-34 9.3-42.7 25.4l-127.6 236c-7.3 13.4-19 21.9-34.1 24.6L44 353.8c-18.1 3.3-31.8 15.2-37.5 32.6-5.7 17.4-1.6 35.1 11.1 48.3l186 193.9c10.6 11 15.1 24.8 13 39.9l-21.8 159.6h636.3L809.4 669z"
                                    fill="#FAD97E" opacity=".2" p-id="13185"></path>
                                <path
                                    d="M809.4 669c-2-15.1 2.4-28.8 13-39.9l186.1-193.7c12.7-13.2 16.8-30.9 11.1-48.3-5.7-17.4-19.4-29.3-37.5-32.6l-264.8-48c-15.1-2.7-26.8-11.2-34-24.7L555.9 45.5c-8.7-16.1-24.3-25.4-42.7-25.5-18.4 0-34 9.3-42.7 25.4l-127.6 236c-7.3 13.4-19 21.9-34.1 24.6L44 353.8c-18.1 3.3-31.8 15.2-37.5 32.6-5.7 17.4-1.6 35.1 11.1 48.3l186 193.9c10.6 11 15.1 24.8 13 39.9l-2.9 21.1h598.6l-2.9-20.6z"
                                    fill="#FAD97E" opacity=".2" p-id="13186"></path>
                                <path
                                    d="M1008.5 435.4c12.7-13.2 16.8-30.9 11.1-48.3-5.7-17.4-19.4-29.3-37.5-32.6l-264.8-48c-15.1-2.7-26.8-11.2-34-24.7L555.9 45.5c-8.7-16.1-24.3-25.4-42.7-25.5-18.4 0-34 9.3-42.7 25.4l-127.6 236c-7.3 13.4-19 21.9-34.1 24.6L44 353.8c-18.1 3.3-31.8 15.2-37.5 32.6-5.7 17.4-1.6 35.1 11.1 48.3l67.3 70.2h856.9l66.7-69.5z"
                                    fill="#FAD97E" opacity=".2" p-id="13187"></path>
                                <path
                                    d="M982.2 354.5l-264.8-48c-15.1-2.7-26.8-11.2-34-24.7L555.9 45.5c-8.7-16.1-24.3-25.4-42.7-25.5-18.4 0-34 9.3-42.7 25.4l-127.6 236c-7.3 13.4-19 21.9-34.1 24.6L44 353.8c-9.8 1.8-18.1 6.2-24.8 12.6h987.1c-6.5-6-14.7-10.2-24.1-11.9z"
                                    fill="#FAD97E" opacity=".2" p-id="13188"></path>
                                <path
                                    d="M555.9 45.5c-8.7-16.1-24.3-25.4-42.7-25.5-18.4 0-34 9.3-42.7 25.4L372 227.7h282.3L555.9 45.5z"
                                    fill="#FAD97E" opacity=".2" p-id="13189"></path>
                            </svg>
                        </div>
                    </div>

                    <div class="person">
                        <div class="people">
                            0人
                        </div>
                        <p>已读</p>
                    </div>

                    <div class="population">

                        <svg t="1667997144045" class="icon" viewBox="0 0 1024 1024" version="1.1"
                            xmlns="http://www.w3.org/2000/svg" p-id="15522" width="200" height="200">
                            <path
                                d="M736 531.2l-25.6 44.8c83.2 44.8 128 134.4 128 224l51.2 0C889.6 691.2 832 588.8 736 531.2zM505.6 128C390.4 128 300.8 224 300.8 339.2c0 76.8 38.4 140.8 96 179.2C281.6 556.8 192 672 192 806.4l51.2 0c0-140.8 121.6-262.4 268.8-262.4 115.2 0 211.2-96 211.2-211.2S620.8 128 505.6 128zM505.6 492.8c-83.2 0-153.6-70.4-153.6-153.6 0-83.2 70.4-153.6 153.6-153.6 83.2 0 153.6 70.4 153.6 153.6C665.6 422.4 595.2 492.8 505.6 492.8zM883.2 364.8c0-89.6-70.4-166.4-166.4-166.4 6.4 12.8 19.2 32 25.6 44.8 57.6 12.8 96 64 96 121.6 0 70.4-57.6 128-128 128-12.8 19.2-25.6 32-38.4 44.8 12.8 0 25.6-6.4 38.4-6.4C806.4 531.2 883.2 454.4 883.2 364.8zM902.4 518.4l-19.2 38.4c64 38.4 102.4 108.8 102.4 179.2L1024 736C1024 646.4 979.2 563.2 902.4 518.4zM0 736l44.8 0c0-76.8 38.4-147.2 102.4-179.2L121.6 518.4C44.8 563.2 0 646.4 0 736zM345.6 531.2C332.8 518.4 320 505.6 307.2 486.4c-70.4 0-128-57.6-128-128 0-57.6 44.8-108.8 96-121.6C288 224 294.4 211.2 300.8 192c-89.6 0-166.4 76.8-166.4 166.4 0 89.6 76.8 166.4 166.4 166.4C320 531.2 332.8 531.2 345.6 531.2z"
                                p-id="15523" fill="#8a8a8a"></path>
                        </svg>


                        <p>
                            找人共读
                        </p>
                    </div>
                </div>
            </div>

            <div class="briefly">
                <p>简介:</p>
                <div>
                    {{ lists.bookIntro }}

                </div>
            </div>

            <!-- <div class="catalogbox">
                <p>目录</p>
                <div class="right">
                    共22章
                    <div class="svg">
                        <svg t="1668007269649" class="icon" viewBox="0 0 1024 1024" version="1.1"
                            xmlns="http://www.w3.org/2000/svg" p-id="1913" width="200" height="200">
                            <path d="M798.38 538.03l-575.1-346.2 0.04-68.75 575.04 345.6 0.02 69.35z" p-id="1914"
                                fill="#646d7c"></path>
                            <path d="M798.38 538.03L223.3 894.99v-69.52l575.06-356.79 0.02 69.35z" p-id="1915"
                                fill="#646d7c"></path>
                        </svg>

                    </div>

                </div>
            </div> -->

            <div class="catalogbox">
                <p>书评</p>
                <div class="right">
                    <div class="svg">
                        <svg t="1668008230226" class="icon" viewBox="0 0 1024 1024" version="1.1"
                            xmlns="http://www.w3.org/2000/svg" p-id="3012" width="200" height="200">
                            <path
                                d="M928 365.664a32 32 0 0 0-32 32V864a32 32 0 0 1-32 32H160a32 32 0 0 1-32-32V160a32 32 0 0 1 32-32h429.6a32 32 0 0 0 0-64H160a96 96 0 0 0-96 96v704a96 96 0 0 0 96 96h704a96 96 0 0 0 96-96V397.664a32 32 0 0 0-32-32z"
                                fill="#79818e" p-id="3013"></path>
                            <path
                                d="M231.616 696.416a38.4 38.4 0 0 0 44.256 53.792l148-38.368L950.496 185.248 814.72 49.472 290.432 573.76l-58.816 122.656z m111.808-85.12L814.72 140l45.248 45.248-468.992 468.992-77.824 20.16 30.272-63.104z"
                                fill="#79818e" p-id="3014"></path>
                        </svg>

                    </div>
                    <p>
                        写书评
                    </p>
                </div>
            </div>



            <div class="everyonebox">
                <p>大家都在看</p>

                <div class="bookbox">
                    <div class="book" v-for="item in express.slice(0, 3)" :key="item.bookId" @click="book(item)">
                        <div class="img">
                            <img :src="item.bookCover" alt="">
                        </div>
                        <div class="txt">
                            {{ item.bookName }}
                        </div>
                    </div>

                    <!-- <div class="book">
                        <div class="img">
                            <img src="../assets/img/book5.png" alt="">
                        </div>
                        <div class="txt">
                            看你一眼就会笑
                        </div>
                    </div>

                    <div class="book">
                        <div class="img">
                            <img src="../assets/img/book5.png" alt="">
                        </div>
                        <div class="txt">
                            看你一眼就会笑
                        </div>
                    </div> -->

                </div>

                <div class="bookbox">
                    <div class="book" v-for="item in express.slice(3, 6)" :key="item.bookId" @click="book(item)">
                        <div class="img">
                            <img :src="item.bookCover" alt="">
                        </div>
                        <div class="txt">
                            {{ item.bookName }}
                        </div>
                    </div>

                </div>

            </div>


            <div class="footerbox">
                <div class="footer">
                    <div class="left" v-if="ishow" @click="linkle">
                        <div class="img">
                            <img src="../assets/收藏.png" alt="">
                        </div>
                        <p>收藏</p>
                    </div>

                    <div class="left" v-else @click="linkle">
                        <div class="img">
                            <img src="../assets/收藏_实心.png" alt="">
                        </div>
                        <p>已收藏</p>
                    </div>

                    <div class="buybox" @click="setCarNum">
                        立即阅读
                    </div>
                </div>


            </div>

            <br>
            <br>
            <br>


        </div>
    </div>
</template>

<script>
import { getExpressData } from "../api/home.js";
export default {
    data() {
        return {

            good: [],
            lists: [],
            booklists: [],
            linkMath: [],
            express: [],
            ishow: true,
            // rebook:[],
        }
    },

    methods: {

        ref() {
            this.$router.go(-1)
        },


        getExpressDataFun() {
            getExpressData().then((data) => {
                console.log(data)
                this.express = data.records
                console.log("express", this.express)
            })
        },



        book(item) {
            this.express = item
            localStorage.setItem("forms", JSON.stringify(this.express))
            this.$router.push("/Gratis2Detall")
        },












        // buys(){
        //     this.$router.push("/SettleMent")
        // },


        // 立即阅读
        setCarNum() {
            this.$router.push("/ContentDetails")
            // this.booklists.push(this.lists)

            // window.localStorage.setItem("listss", JSON.stringify(this.booklists))

            //  this.booklists.push(this.good)
            //  console.log("booklist:",this.booklists)
            //  window.localStorage.setItem("listsss",JSON.stringify(this.booklists))
        },


        // 存入
        getLocalStorage() {


            this.linkMath.forEach(i => {
                if (i.bookId == this.lists.bookId) {
                    // console.log(1, this.isShow = );
                    this.ishow = !this.ishow
                } else {
                    this.ishow = true
                    // console.log(2);
                }
            })
            // if (localStorage.getItem("linkMath") == null) {
            //     // 创建一个localStorage
            //     localStorage.setItem("linkMath", JSON.stringify([]));
            // }
            // // 如果localStorage有this.moveid时linkle等于true
            // this.linkMath = JSON.parse(localStorage.getItem("linkMath"));


            // this.linkMath.forEach(i => {
            // 		if (i.bookid == this.lists.bookId) {
            // 			// console.log(1, this.isShow = );
            // 			this.ishow = false
            // 		} else {
            // 			this.ishow = true
            // 			// console.log(2);
            // 		}
            // 	})
            // this.linkMath.forEach((item) => {
            //     // console.log(item);
            //     if (item.bookId == this.lists.bookId) {
            //         // console.log('object');
            //         this.ishow = true;
            //     }
            //         this.ishow =false

            // });
            // this.linkMath = JSON.parse(localStorage.getItem("linkMath"));
        },

        // 点击存入相关的书本数据
        // linkleing() {
        //     // linkMath没有this.moveid时push进去
        //     if (this.linkMath.indexOf(this.lists) == -1) {
        //         this.linkMath.push(this.lists);
        //         this.linkle = true;
        //     } else {
        //         this.linkMath.splice(this.linkMath.indexOf(this.lists), 1);
        //         this.linkle = false;
        //     }
        //     localStorage.setItem("linkMath", JSON.stringify(this.linkMath));
        // },


        linkle() {
            this.ishow = !this.ishow;
            //    let index = this.linkMath.findIndex((item)=>{
            //         return item.bookId == this.lists.bookId
            //     })

            // if(index == -1){
            //     this.linkMath.push(this.lists)
            //     this.ishow = true
            // }else{
            //     // this.linkMath[index].splice(item)
            //     this.linkMath.splice(this.linkMath.indexOf(this.lists), 1);
            //     this.ishow = false;
            // }

            // localStorage.setItem("linkMath", JSON.stringify(this.linkMath))
            if (this.ishow === false) {
                // 查找 id 是否相等
                let index = this.linkMath.findIndex(i => {
                    return i.bookId == this.lists.bookId
                })
                // index != -1 已存在 去重
                if (index != -1) {
                    this.linkMath.splice(index, 1)
                }
                localStorage.setItem("linkMath", JSON.stringify(this.linkMath))
                // 添加
                this.linkMath = [this.lists, ...this.linkMath]
                // console.log(this.recipt);
                // 存入本地数据
                localStorage.setItem("linkMath", JSON.stringify(this.linkMath))
            } else {
                // 过滤id不相等的 
                this.linkMath = this.linkMath.filter(i => i.bookId != this.lists.bookId)
                // 覆盖 取消收藏
                localStorage.setItem("linkMath", JSON.stringify(this.linkMath))
                // console.log(this.recipt);
            }

        },
    },

    created() {
        // if (window.localStorage.getItem("listss")) {
        //     this.booklist = JSON.parse(window.localStorage.getItem("listss"))
        //     // console.log("是");
        //     console.log(this.booklist);
        // } else {
        //     window.localStorage.setItem("listss", JSON.stringify({}))

        // }
        this.lists = JSON.parse(window.localStorage.getItem("forms"))

        // this.rebook =JSON.parse(window.localStorage.getItem("formsbook"))
        // console.log(2222,this.rebook);
        // this.good = JSON.parse(window.localStorage.getItem("listss"))
        // this.getLocalStorage();
        // console.log("lists", this.lists)


        this.getLocalStorage()

        this.getExpressDataFun()
    }
}
</script>

<style lang="scss" scoped>
.DetailView {
    .headerbox {
        background-color: #fff;
        width: 100%;
        padding-bottom: 20px;
        position: fixed;
        top: 0px;

        .head {
            padding: 0px 10px;
            padding-top: 10px;
            display: flex;
            justify-content: space-between;
            margin-bottom: 24px;

            .left {
                .icon {
                    width: auto;
                    height: 20px;
                }
            }

            .right {
                display: flex;

                .bon {
                    .icon {
                        width: auto;
                        height: 16px;

                    }
                }

                .dot {
                    margin-left: 20px;

                    .icon {
                        width: auto;
                        height: 16px;
                    }
                }
            }
        }

        .bookbox {
            padding: 0px 18px;
            display: flex;
            margin-bottom: 20px;

            .img {
                img {
                    width: auto;
                    height: 106px;
                }

                margin-right: 8px;
            }

            .textbox {
                p {
                    font-size: 16px;
                    color: #000012;
                    margin-bottom: 20px;
                    font-weight: bold;
                }

                .box {
                    margin-bottom: 12px;

                    p {
                        color: #c5cdd8;
                        margin-bottom: 4px;
                        font-size: 12px;
                        font-weight: normal;
                    }
                }

                .price {
                    font-size: 14px;
                    color: #f62e1c;
                    font-weight: bold;
                }
            }


        }

        .bottombox {
            display: flex;
            justify-content: space-around;
            align-items: center;

            .points {
                p {
                    color: #000;
                    font-size: 13px;
                    font-weight: bold;
                    text-align: center;
                }

                .star {
                    .icon {
                        width: auto;
                        height: 10px;
                    }
                }

            }

            .person {
                .people {
                    font-size: 13px;
                    font-weight: bold;
                    text-align: center;
                }

                p {
                    font-size: 12px;
                    color: #bfc5d3;
                }
            }

            .population {
                display: flex;
                flex-direction: column;
                align-items: center;

                .icon {
                    width: auto;
                    height: 16px;

                }

                p {
                    font-size: 12px;
                    color: #bfc5d3;
                }
            }
        }
    }

    .briefly {
        margin-top: 250px;
        background-color: #fff;
        padding: 12px 18px 24px;
        margin-bottom: 10px;

        p {
            font-size: 14px;
            color: #000;
            font-weight: bold;
        }

        div {
            font-size: 12px;
            color: #c2c9d5;
        }
    }

    .catalogbox {
        padding: 14px;
        background-color: #fff;
        display: flex;
        justify-content: space-between;
        margin-bottom: 8px;

        p {
            font-size: 15px;
            color: #000;
            font-weight: bold;
        }

        .right {
            font-size: 12px;
            color: #b6bac2;
            display: flex;
            align-items: center;

            .svg {
                padding-left: 2px;

                .icon {
                    padding-top: 4px;
                    width: auto;
                    height: 15px;
                }
            }

            p {
                font-size: 13px;
                color: #4f596a;
                margin-left: 4px;
            }
        }
    }

    .piecesbox {
        padding: 14px;
        background-color: #fff;
        margin-bottom: 10px;

        p {
            color: #0e1830;
            font-size: 16px;
            font-weight: bold;
            padding-bottom: 16px;

        }

        .bookbox {
            display: flex;

            .book {
                margin-right: 14px;

                .img {
                    img {
                        width: auto;
                        height: 118px;
                    }
                }

                p {
                    width: 84px;
                    font-size: 12px;
                    color: #000;
                }
            }
        }


    }


    .everyonebox {
        background-color: #fff;
        padding: 20px 15px;

        p {
            font-size: 16px;
            color: #000;
            font-weight: bold;
            margin-bottom: 16px;

        }

        .bookbox {
            display: flex;
            margin-bottom: 10px;

            .book {
                margin-right: 50px;

                .img {
                    img {
                        width: 76px;
                        height: 110px;
                    }
                }

                .txt {
                    width: 80px;
                    font-size: 12px;
                    color: #1b283f;
                }
            }
        }



    }

    .footerbox {
        background-color: #ffffff;
        width: 100%;
        position: fixed;
        bottom: 0px;
        padding: 10px 0px;

        .footer {
            display: flex;
            justify-content: space-evenly;
            align-items: center;

            .left {
                display: flex;
                align-items: center;
                flex-direction: column;

                .img {
                    height: 25px;
                    width: 25px;

                    // background: url(../assets/收藏.png) no-repeat;
                    // background-size: 25px 25px;
                    img {
                        width: 25px;
                        height: 25px;
                    }

                }

                p {
                    color: #364255;
                    font-size: 12px;
                    padding-left: 1px;
                }

                margin-right: 25px;
            }

            .joinbox {
                .img {
                    height: 26px;

                    .icon {
                        width: auto;
                        height: 25px;
                    }


                }

                p {
                    color: #364255;
                    font-size: 12px;
                    padding-left: 1px;
                }

                margin-right: 20px;
            }

            .buybox {
                color: #fff;
                font-size: 14px;
                padding: 14px 100px;
                background-color: #f5c265;
                border-radius: 50px;
            }
        }
    }


}
</style>